@import "../var";
@import "../mixin";
.my-equity {
  border-bottom: px(16) solid #fff;
}
// 会员卡
.membership-card {
  width: px(375);
  height: px(206);
  padding: px(40) px(40) px(47);
  background-size: 100% 100%;
  background-image: url('../../img/personalCenter/ordinary-card.png');
  &.silver {
    background-image: url('../../img/personalCenter/silver-card.png');
  }
  &.gold {
    background-image: url('../../img/personalCenter/gold-card.png');
    dt {
      color: #8B580E;
    }
    dd {
      color: #9E6F26;
    }
    p {
      color: #8B580E;
    }
    .level-progress {
      .progress-group {
        background: #C29D63;
        .progress-num {
          background: #FEF6D4;
          span {
            color: #957132;
            background: #FEF6D4;
          }
        }
        .level-tip {
          background: #C29D63;
        }
      }
    }
  }
  &.diamond {
    background-image: url('../../img/personalCenter/diamond-card.png');
    dt {
      color: #D7B57F;
    }
    dd {
      color: #AB9168;
    }
    p {
      color: #D7B57F;
    }
    .level-progress {
      .progress-group {
        background: #C29D63;
        .progress-num {
          display: none;
        }
        .level-tip {
          background: #C29D63;
        }
      }
    }
  }
  dt {
    font-size: px(30);
    color: #303344;
    font-weight: bold;
  }
  dd {
    font-size: px(12);
    color: #616473;
    margin-top: px(2);
  }
  p {
    font-size: px(10);
    color: #313131;
    margin-top: px(27);
  }
  .level-progress {
    margin-top: px(9);
    padding-right: px(90);
    .progress-group {
      position: relative;
      height: px(2);
      background: #959499;
      border-radius: px(2) 0 0 px(2);
    }
    .progress-num {
      position: relative;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      width: 50%;
      min-width: px(18);
      background: #303344;
      z-index: 1;
      span {
        position: absolute;
        top: px(-6);
        right: 0;
        height: px(14);
        line-height: px(14);
        border-radius: px(14);
        font-size: px(10);
        padding: 0 px(6);
        color: #FFF;
        background: #303344;
      }
    }
    .level-tip {
      position: absolute;
      top: px(-6);
      right: 0;
      width: px(30);
      height: px(14);
      line-height: px(14);
      border-radius: px(14);
      font-size: px(10);
      text-align: center;
      color: #FFF;
      background: #959499;
    }
  }
}
//会员优惠
.membership-discount {
  background-color: #fff;
  padding: px(9) px(16) px(16);
  h2 {
    margin-bottom: px(12);
    font-size: px(16);
    line-height: px(22);
    .show-detail {
      font-size: px(12);
      color: #0099FF;
    }
  }
  p:not(:last-child) {
    margin-bottom: px(2);
  }
}
//会员活动
.membership-activities,
.membership-task,
.membership-exchange {
  margin-top: px(12);
  padding: px(16);
  background-color: #fff;
  h2 {
    font-size: px(16);
  }
}
.membership-activities {
  position: relative;
  padding-bottom: px(24);
  .gzl-swiper {
    margin-top: px(16);
    border-radius: px(35);
    img {
      height: px(70);
      border-radius: px(70);
    }
  }
  .activities-pagination {
    position: absolute;
    bottom: px(15);
    left: 0;
    width: 100%;
    text-align: center;
    height: px(3);
    .swiper-pagination-bullet {
      background: #D8D8D8;
      width: px(4);
      height: px(3);
      border-radius: px(3);
      vertical-align: top;
      &:not(:first-child) {
        margin-left: px(4);
      }
    }
    .swiper-pagination-bullet-active {
      width: px(8);
      background: #BBBBBB;
    }
  }
}
// 会员任务
.membership-task {
  ul {
    margin-top: px(16);
  }
  li {
    line-height: px(36);
    align-items: center;
    &:not(:first-child) {
      margin-top: px(20);
    }
  }
  span {
    margin-left: px(12);
  }
  .integral-tip {
    display: inline-block;
    background: #FFD800;
    border-radius: px(2);
    font-size: px(12);
    padding: 0 px(4);
    line-height: px(16);
    margin-left: px(8);
  }
  .task-btn {
    display: inline-block;
    width: px(74);
    height: px(28);
    line-height: px(28);
    text-align: center;
    border-radius: px(28);
    background-image: $clr-gradient;
    &.finish {
      background: #EBEBEB;
      color: #999;
    }
  }
}
// 超值兑换
.membership-exchange {
  .exchange-list {
    font-size: 0;
    padding: 0 px(12);
    margin-top: px(16);
  }
  .exchange-item {
    font-size: px(14);
    display: inline-block;
    width: 50%;
    padding: 0 px(4);
    text-align: center;
    img {
      display: inline-block;
      vertical-align: top;
    }
    div {
      margin-top: px(8);
      @include ellipsis;
    }
    p {
      color: $clr-g6;
      font-size: px(13);
      margin-top: px(4);
    }
    .icon-integral {
      margin-right: px(4);
      vertical-align: -1px;
    }
  }
  .show-more-exchage {
    color: #999;
    background: #EBEBEB;
    border-radius: px(4);
    line-height: px(30);
    text-align: center;
    margin-top: px(40);
  }
}
// 升级提示
.membership-upgrade {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.2);
  z-index: 1;
  &.show {
    display: flex;
  }
  .upgrade-info {
    position: relative;
    width: px(256);
    height: px(315);
    background: url(../../img/personalCenter/upgrade-bg.png);
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    padding-top: px(32);
    div {
      font-size: px(22);
      line-height: px(30);
      font-weight: bold;
    }
    h2 {
      font-size: px(36);
      font-weight: bold;
    }
    p {
      position: relative;
      width: px(104);
      height: px(18);
      line-height: px(18);
      font-size: px(11);
      font-weight: bold;
      margin: px(2) auto 0;
      background: rgba(255,255,255,.16);
      border-radius: 2px;
      font-weight: bold;
      &:before {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        margin: auto;
        @include arrow(up,px(7),rgba(255,255,255,.16));
      }
    }
    a {
      position: absolute;
      left: 0;
      right: 0;
      bottom: px(17);
      font-size: px(16);
      color: #FFAB00;
    }
  }
  .close-btn {
    margin-top: px(25);
    .icon {
      font-size: px(30);
      color: #fff;
    }
  }
}
